<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
  String basePath = request.getContextPath();
  Object email = request.getSession().getAttribute("email");
%>
<html>
<head>
  <title>下单</title>
  <jsp:include page="../common/common-css.jsp"></jsp:include>
  <jsp:include page="../common/common-js.jsp"></jsp:include>
  <script type="application/javascript"
          src="<%=basePath%>/plugin/datepicker/bootstrap-datetimepicker.min.js"></script>
  <script type="application/javascript"
          src="<%=basePath%>/plugin/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
  <link rel="stylesheet" href="<%=basePath%>/plugin/datepicker/bootstrap-datetimepicker.min.css">
  <style type="text/css">
    .preDesc {
      width: 100px;
    }

    .valDesc {
      color: darkgray;
    }

    td {
      padding: 10px
    }
  </style>
</head>
<body style="margin: 0px;padding: 0px;background-color: #F5F5F5">
<jsp:include page="../../head.jsp"></jsp:include>
<div class="container-fluid" style="padding: 0px">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px">
    <div class="col-xs-0 col-sm-1 col-md-1 col-lg-2"></div>
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4" style="margin: 15px 0px">
      <div class="col-xs-0 col-sm-1 col-md-0 col-lg-0"></div>
      <div class="col-xs-12 col-sm-10 col-md-12 col-lg-12" style="background-color: #ffffff">
        <div style="padding: 10px 0px;">
          <c:choose>
            <c:when test="${orderExtDto.url == null || orderExtDto.url == '/img/product.png'}">
              <img src='<%=basePath%>/img/product.png' alt="商品图片" id="productImg"
                   class="img-responsive">
            </c:when>
            <c:otherwise>
              <img src='${orderExtDto.url}-580x350' alt="商品图片" id="productImg"
                   class="img-responsive img-rounded">
            </c:otherwise>
          </c:choose>
        </div>
        <table style="width: 100%;padding: 10px">
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="preDesc">${orderExtDto.productName}</td>
            <td align="right" class="valDesc">${orderExtDto.price}&nbsp;元/${orderExtDto.unit}</td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="preDesc">余量</td>
            <td align="right" class="valDesc">${orderExtDto.inventory}&nbsp;${orderExtDto.unit}</td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="preDesc">选择数量</td>
            <td align="right">
              <select id="count" class="valDesc" style="border: none">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="30">30</option>
              </select>
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="preDesc">购买方式</td>
            <td align="right">
              <select id="deliveryType" class="valDesc" style="border: none">
                <option value="1">预约到店</option>
                <option value="2" selected>送货上门</option>
              </select>
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;" class="sendHome">
            <td class="preDesc">送货地址</td>
            <td align="right">
              <input type="text" style="width: 100%;border: none" class="text-right valDesc"
                     maxlength="50" id="sendAddr"
                     value="${orderExtDto.addr}">
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="preDesc" id="timeDesc">送货时间</td>
            <td align="right">
              <div class="input-group">
                <input type="text" style="width: 100%;border: none" class="form_datetime" readonly id="sendtime">
                <span class="input-group-btn">
                  <a type="button" rel="popover">
                    &nbsp;<i class="icon-calendar text-default-color"></i>&nbsp;
                  </a>
                </span>
              </div>
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="valDesc" colspan="2">
              <textarea readonly maxlength="50" rows="7"
                        style="width: 100%;resize: none;border: none">${orderExtDto.remark==""?"没有商品描述":orderExtDto.remark}</textarea>
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="preDesc">总金额</td>
            <td align="right" class="valDesc">
              <b id="amountDesc" style="font-weight: bold;display: inline"></b>
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="valDesc" colspan="2">
              <textarea rows="3" placeholder="给商家留言" maxlength="50"
                        style="resize: none;width: 100%;border: none;padding: 0px"
                        id="remark"></textarea>
            </td>
          </tr>
          <tr>
            <td>
              <c:choose>
                <c:when test="${orderExtDto.inventory > 0}">
                  <button id="save" class="btn btn-default-color"
                          style="margin-left: 12px;margin-bottom: 20px;margin-top: 10px">
                    &nbsp;下&nbsp;单&nbsp;</button>
                </c:when>
                <c:otherwise>
                  <button id="save" class="btn" disabled
                          style="margin-left: 12px;margin-bottom: 20px;margin-top: 10px;background-color: #999999;color: #ffffff">
                    &nbsp;已卖完&nbsp;</button>
                </c:otherwise>
              </c:choose>
            </td>
            <td align="right">
              <button onclick="javascript:calIncome(${orderExtDto.productId});"
                      class="btn btn-default-color"
                      style="margin-right: 12px;margin-bottom: 20px;margin-top: 10px">计算收益
              </button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4" style="margin: 15px 0px;">
      <div class="col-xs-0 col-sm-1 col-md-0 col-lg-0"></div>
      <div class="col-xs-12 col-sm-10 col-md-12 col-lg-12" style="background-color: #ffffff;padding: 20px 0px">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="padding: 0px 10px">
          <table style="width: 100%">
            <tr>
              <td align="center">
                <img src="${orderExtDto.shopUrl}-120x120" class="img-responsive img-circle">
              </td>
            </tr>
          </table>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9">
          <p><h4>${orderExtDto.shopName}</h4></p>
          <p>品牌介绍：${orderExtDto.shopAd}</p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
          <hr style="width: 100%">
          <a href="<%=basePath%>/shop/shopInfo?email=${orderExtDto.shopEmail}">
            <div>门店信息<i class="icon-angle-right" style="padding: 0px 10px"></i></div>
          </a>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
      <div class="col-xs-0 col-sm-1 col-md-0 col-lg-0"></div>
      <div class="col-xs-12 col-sm-10 col-md-12 col-lg-12" style="background-color: #ffffff;">
        <table style="width: 100%;margin-top: 20px">
          <tr style="border-bottom: 1px solid #f5f5f5">
            <td style="width: 100%;padding: 5px">
              <input id="note" type="text" maxlength="512" style="width: 100%;padding: 5px;border: none"
                     placeholder="输入留言">
            </td>
            <td align="right" style="padding: 5px">
              <button class="btn btn-default-color"
                      onclick="javascript:reply('${orderExtDto.uuid}');">留言
              </button>
            </td>
          </tr>
        </table>
        <div style="padding: 100px" align="center" class="loadingNotes">
          <i class="icon- icon-cog icon-spin text-default-color"></i>&nbsp;加载留言...
        </div>
        <div style="padding: 40px 0px;display: none" align="center" class="noNotes">
          <p><i class="icon-exclamation-sign icon-4x text-default-color"></i></p>

          <p>没有留言!</p>
        </div>
        <div class="notes" style="padding: 10px;"></div>
        <hr style="width: 100%">
        <div class="loadMoreNotes text-center" style="display: none;padding: 40px 0px">加载更多</div>
        <div class="loadNotesOver text-center" style="display: none;padding: 40px 0px"></div>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div class="modal fade bs-example-modal-sm" id="loginModal" role="dialog" style="margin-top: 20%;">
  <div class="modal-dialog modal-sm" style="">
    <div class="modal-content" style="">
      <div class="modal-header" align="center">
        您还没有登录!
      </div>
      <div class="modal-body text-center">
        <i class="icon-info-sign icon-4x" style="color: #4acaa8;"></i>
      </div>
      <div class="modal-footer">
        <table style="width: 100%">
          <tr>
            <td style="width: 50%" align="center"><a class="btn btn-default" data-dismiss="modal">取&nbsp;&nbsp;消</a>
            </td>
            <td style="width: 50%" align="center"><a target="_top" href="<%=basePath%>/login"
                                                     class="btn btn-default-color">登&nbsp;&nbsp;录</a></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div class="modal fade bs-example-modal-sm" id="incomeModal" role="dialog" style="margin-top: 10%;">
  <div class="modal-dialog modal-sm" style="">
    <div class="modal-content" style="">
      <div class="modal-header" align="center">
        收益明细
      </div>
      <div class="modal-body">
        <p>购买返现：￥<span id="part1" style="font-size: x-large;" class="text-default-color"></span></p>

        <p>邀请购买提成：￥<span id="part2" style="font-size: x-large;" class="text-default-color"></span></p>
      </div>
      <div class="modal-footer">
        <p>
          <a class="btn btn-default" data-dismiss="modal">了解</a>
        </p>
      </div>
    </div>
  </div>
</div>
<input type="hidden" id="productId" value="${orderExtDto.productId}">
<input type="hidden" id="amount">
<input type="hidden" id="originalCost">
<jsp:include page="../common/common-html.jsp"></jsp:include>
<jsp:include page="../../foot.jsp"></jsp:include>
</body>


<script language="JavaScript">

  function reply(uuid) {
    if (uuid == null || uuid == '' || uuid == 'null') {
      return;
    }
    var email = '<%=email%>';
    if (!validateEmail(email)) {
      return;
    }
    var content = $.trim($('#note').val());
    if (content == '') {
      alerErr("输入留言内容");
      return;
    }
    var url = "<%=basePath%>/note/add";
    var param = {content: content, uuid: uuid};
    $.post(url, param, function (data, status) {
      if (status == 'success') {
        $('#note').val('');
        $(".noNotes").hide();
        var temp = parseNote(data.data.email, data.data.logo, data.data.content, data.data.name, data.data.createTime);
        $('.notes').prepend(temp);
      } else {
        aler(data);
      }
    })
  }
  function parseNote(email, logo, content, name, createTime) {
    if (logo != null && logo != '' && logo != undefined) {
      logo += "-120x120";
    }
    if (logo == undefined) {
      logo = '<%=basePath%>/img/user.png';
    }
    var url = "<%=basePath%>/user/queryinfo?email=" + email;
    var subItem = '';
    subItem += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 10px 0px;">';
    subItem += '<table style="width: 100%;">';
    subItem += '<tr>';
    subItem += '<td rowspan="2" style="width: 50px;height: 50px;padding: 5px" align="center" valign="top">';
    subItem += '<a href="' + url + '"><img class="img-responsive img-circle"src="' + logo + '" /></a>';
    subItem += '</td>';
    subItem += '<td style="padding: 5px;">' + content + '</td>';
    subItem += '</tr>';
    subItem += '<tr>';
    subItem += '<td style="padding-left: 5px;color: #d3d3d3;padding-bottom: 5px;padding-top: 0px;">' + name + '<br>' + createTime + '</td>';
    subItem += '</tr>';
    subItem += '</table>';
    subItem += '</div>';
    return subItem;
  }
  var notePageNo = 1;
  function loadNotes(notePageNo, notePageSize) {
    var uuid = '${orderExtDto.uuid}';
    var url = '<%=basePath%>/note/list';
    var param = {uuid: uuid, pageNo: notePageNo, pageSize: notePageSize};
    $.post(url, param, function (data, status) {
      if (data != null && data.length > 0) {
        $(".loadingNotes").hide();
        $(".noNotes").hide();
        var item = '';
        for (var i = 0; i < data.length; i++) {
          item += parseNote(data[i].email, data[i].logo, data[i].content, data[i].name, data[i].createTime);
        }
        $(".notes").prepend(item);
        if (data.length == notePageSize) {
          $(".loadMoreNotes").show();
        } else {
          $(".loadNotesOver").show();
        }
      } else {
        $(".loadingNotes").hide();
        $(".loadMoreNotes").hide();
        if (notePageNo == 1) {
          $(".noNotes").show();
        } else {
          $(".loadNotesOver").show();
        }
      }
    })
  }
  $(".loadMoreNotes").click(function () {
    loadNotes(notePageNo++, 10);
  })
  // - 到店自提
  function getBySelf() {
    $(".sendHome").hide();
    $("#timeDesc").text("到店时间");
  }
  // - 送货上门
  function sendHome() {
    $(".sendHome").show();
    $("#timeDesc").text("送货时间");
  }

  function loadDeliveryType() {
    $("#deliveryType").change(function () {
      var deliveryType = $(this).val();
      if (deliveryType == 1) {
        // - 到店自提
        getBySelf();
      } else if (deliveryType == 2) {
        // - 送货上门
        sendHome();
      }
    })
  }

  function isGetBySelf(deliveryType) {
    if (deliveryType == 1) {
      return true;
    } else {
      return false;
    }
  }

  // - 下单
  function save() {
    var email = "<%=email%>";
    if (!validateEmail(email)) {
      return;
    }
    var count = $.trim($("#count").val());
    var sendtime = $.trim($("#sendtime").val());
    var deliveryType = $("#deliveryType").val();
    var remark = $.trim($("#remark").val());
    var sendAddr = $.trim($("#sendAddr").val());
    var productId = $("#productId").val();
    var amount = $("#amount").val();
    var originalCost = $("#originalCost").val();
    if (sendtime == "") {
      if (isGetBySelf(deliveryType)) {
        alerErr("选择取货时间!");
      } else {
        alerErr("选择送货时间!");
      }
      return;
    }
    if (!isGetBySelf(deliveryType)) {
      // - 送货上门
      if (sendAddr == '') {
        alerErr("填写收获地址!");
        return;
      }
    }
    if (count > ${orderExtDto.inventory}) {
      alerErr("库存不足!");
      return;
    }
    var param = {
      productId: productId,
      email: email,
      count: count,
      sendtime: sendtime,
      amount: amount,
      originalCost: originalCost,
      deliveryType: deliveryType,
      sendAddr: sendAddr,
      remark: remark
    };
    var url = "<%=basePath%>/order/add";
    $.post(url, param, function (data, status) {
      aler(data);
      if (data.code == 200) {
        var backUrl = '<%=basePath%>/order/info?orderNo=' + data.data;
        window.location = "<%=basePath%>/success?backUrl=" + backUrl;
      }
    })
  }

  // - 计算总金额和成本
  function calAmount() {
    var price = ${orderExtDto.price};
    var originalPrice = ${orderExtDto.originalPrice};
    var count = $("#count").val();
    var amount = price * count;
    var originalCost = originalPrice * count;
    $("#amount").val(amount);
    $("#originalCost").val(originalCost);
    $("#amountDesc").text('￥' + amount + " 元");
  }

  function calIncome(productId) {
    var url = '<%=basePath%>/product/calIncome?productId=' + productId;
    $.post(url, function (data, status) {
      if (status == 'success') {
        $("#part1").text(data.part1);
        $("#part2").text(data.part2);
        $("#incomeModal").modal();
      } else {
        alerErr('计算失败');
      }
    })
  }

  $(function () {
    initStyle();
    loadNotes(notePageNo++, 10);
    // - 日期选择器
    $("#sendtime").datetimepicker({
      format: "yyyy-mm-dd hh:ii",
      autoclose: true,
      todayBtn: true,
      todayHighlight: true,
      minView: "hour",
      language: "zh-CN",
      todayHighlight: true
    });
    loadDeliveryType();
    // - 计算总金额
    calAmount();

    $("#count").change(function () {
      // - 计算总金额
      calAmount();
    })

    // - 下单
    $("#save").click(function () {
      save();
    })
  })

</script>
</html>
